<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
 
  
  .lease-detail {
    .title {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #333333;
      letter-spacing: 0;
      text-align: justify;
      font-weight: bold;
    }
    .header {
      // margin-top: 15px;
      padding: 10px 15px 0 15px;
      background: white;
      .content {
        padding: 15px 0;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        .price {
          font-size: 16px;
          color: red;
          letter-spacing: 0;
          line-height: 16px;
        }
        .date {
          font-size: 11px;
          color: #999999;
          letter-spacing: 0;
        }
      }
    }
    .detail {
      padding: 0 15px;
      margin-top: 10px;
      background: white;
      .title {
        text-align: left;
        padding: 15px 0;
      }
      .name {
        font-size: 15px;
        color: #999999;
        letter-spacing: 0;
        text-align: justify;
        padding-bottom: 15px;
      }
     
    }
    .personal-info {
      margin-top: 15px;
      padding: 10px;
      background: white;
      text-align: center;
      .card {
        width: 95%;
        border-radius: 4px;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.10);
        margin: 0 auto;
      }
      .info {
        padding: 15px 0 15px 5px;
        display: flex;
        .name {
          width: 80%;
          justify-content: flex-start;
          img {
            border-radius: 20px;
          }
          .nick {
            font-size: 14px;
            color: #333333;
            letter-spacing: 0;
          }
          .star {
            font-size: 11px;
            color: #999999;
            letter-spacing: 0;
          }
        }
        .arrow {
          width: 20%;
          text-align: right;
          background: url(../../assets/arrow-right.png) no-repeat right;
        }
      }
      .trade {
        padding: 15px 0 15px 0;
        display: flex;
        .numer {
          width: 50%;
        }
        .sale {
          width: 50%;
        }
        .title {
          font-family: PingFangSC-Medium;
          font-size: 11px;
          color: #999999;
          letter-spacing: 0;
        }
      }
    }
   
    .link-to-app {
      background: #333333;
      box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.30);
      position: fixed;
      bottom: 20px;
      height: 30px;
      margin: auto;
      left: 0;
      right: 0;
      width: 90%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      .logo {
        background: #FE9000;
        border-radius: 2px;
        height: 30px;
        width: 30px;
      }
      .tip {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
        line-height: 35px;
      }
      .arrow {
        width: 20%;
        text-align: right;
        background: url(../../assets/arrow-right-white.png) no-repeat right;
      }
    }
  }
</style>

<template>
  <div class="lease-detail">
    <div class="header">
      <div class="title">{{leaseDetail.title}}</div>
      <div class="content">
        <span class="price">{{leaseDetail.priceInfo}}</span>
        <span class="date">{{leaseDetail.publishingTime}}</span>
      </div>
    </div>
    <div class="detail">
      <div class="title">商品详情</div>
      <div class="name"> <span>{{leaseDetail.description}}</span></div>
      <!-- <div class="image-list">
        <template v-for="(item,imgIndex) in images">
                 <img :key="item.src" @click="index=imgIndex" :src="item.src">
        </template>
      </div> -->
      <image_video_list :height="110" :imageList="imgList" :videoList="videoList"></image_video_list>
    </div>
    <div class="personal-info">
      <div class="card">
        <div class="info">
          <div style="display:flex" class="name">
            <div><span><img width="40px" height="40px" :src='leaseDetail.headPortrait'/></span></div>
            <div style="text-align:left;margin-left:5px;">
              <span class="nick">{{leaseDetail.nickName}}</span><br>
              <span class="star">{{leaseDetail.constellation}} {{leaseDetail.grade}}</span>
            </div>
          </div>
          <div class="arrow">
          </div>
        </div>
        <div class="divider"></div>
        <div class="trade">
          <div class="sale">
            <span>{{leaseDetail.onSaleNumber}}</span><br>
            <span class="title">在售宝贝</span>
          </div>
          <div class="numer">
            <span>{{leaseDetail.transactionNumber}}</span><br>
            <span class="title">累计交易</span>
          </div>
        </div>
      </div>
    </div>
    <comment_list :commentList="leaseDetail.commentList"></comment_list>
    <div class="link-to-app">
      <div class="logo">
  
      </div>
      <div class="tip">
        <span>蚂蚁校园</span> <span>帮你解决大学慵懒</span>
      </div>
      <div class="arrow">
      </div>
    </div>
  </div>
</template>

<script>
  import VueGallery from 'vue-gallery';
  import util  from '@/libs/util'
  import comment_list from '../../components/comment_list.vue'
  import image_video_list from '../../components/image_video_list.vue'
  export default {
    name: 'lease-detail',
    data() {
      return {
        leaseDetail: {},
        imgList: [], 
        videoList:[],
        index: null,
        id:0
      }
    },
    mounted() {
      this.id = this.$route.query.id;
      // this.$http.get('api/share/getProduct?id='+this.id).then((res) => {
      this.$http.get('static/data.json').then((res) => {
        let data = res.data;
        if (data.statusCode == '600') {
          this.leaseDetail = res.data.content;
          this.leaseDetail.publishingTime = util.fmtDate(this.leaseDetail.publishingTime);
          //处理视频和音频
          let imgList = [];
          let videoList = [];
          if (this.leaseDetail.image) {
            this.imgList = this.leaseDetail.image.split(';');
          }
          if (this.leaseDetail.video) {
            this.videoList = this.leaseDetail.video.split(';')
          }
        }
      })
    },
    components: {
      'gallery': VueGallery,
      comment_list,
      image_video_list
    }
  }
</script>

